#pic {
    width: 100%;
    height: 300px;
    background-color: #fff;
}

.picture_carousel {
    width: 1110px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.pictures {
    position: absolute;
    left: 0px;
    top: 0px;
}

.pictures li {
    float: left;
    width: 960px;
    height: 300px;
    list-style: none;
}

.pictures li img{
    display: block;
    width:100%;
    height:100%;
}

.switchable_nav {
    position: absolute;
    right: 8%;
    bottom: 15px;
}

.switchable_nav li {
    list-style: none;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #aaa;
    margin-right: 8px;
    float: left;
    cursor: pointer;
}

.curr {
    background-color: #fff!important;
}


/*666,c4c4c4c*/

.main {
    width: 60%;
    margin-top: 20px;
}


a.more {
    font-size: 12px;
    float: right;
    display: inline-block;
    text-decoration: none;
    color: #666;
}

a.more:hover {
    color: #FF7633;
}

a.more:active {
    color: #625DE1;
}

.list_wrap {
    width: -moz-calc(100% - 100px);
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    margin: 10px auto;
    border-left: 3px dotted #c4c4c4;
}

.section_list {
    list-style: none;
}

.list_item {
    margin: 0px 0px 0px 0px;
    padding: 5px 10px;
    border-left: 3px solid #c4c4c4;
    transition: border-left 0.2s ease-in-out;
    -webkit-transition: border-left 0.2s ease-in-out;
}

.list_item:hover {
    border-left: 3px solid #FF7633;
}

.item_title {
    font-size: 15px;
    text-decoration: none;
    color: #666;
    transition: margin-left 0.2s ease-in-out;
    -webkit-transition: margin-left 0.2s ease-in-out;
}

.item_title:hover {
    margin-left: 5px;
    color: #FF7633;
}

.section_list span {
    float: right;
}

.time {
    display: inline-block;
    font-size: 12px;
    color: #666;
}

.sign_up {
    float: right;
    margin-right: 10px;
    font-size: 15px;
    display: none;
    cursor: pointer;
    color: #FF7633;
}

@media screen and (min-width: 1400px) {
    #main {
        width: 50%;
    }
}

@media screen and (max-width: 1086px) {
    .nav_wrap {
        width: 100%
    }
    #main {
        width: 80%
    }
    .btn {
        margin-right: 20px;
    }
}

@media screen and (max-width: 800px) {
    #main {
        width: 100%;
    }
}

@media screen and (max-width: 610px) {
    .time,
    .btn {
        display: none;
    }
}